<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我是路人甲</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="css/base.min.css"/>
    <style>
        .wrapper{
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #222;
            left: 0;
            top: 0;}
        .wrapper img{
    width: 100%;}
.wrapper {display:table;}
.cell {
    display:table-cell;
    vertical-align:middle;
    opacity:0.1;

    -webkit-transition: opacity .5s linear;
}
        .show{ opacity:1;}

        .btn{
            display: inline-block;
            position: absolute;
            top: 40%;
            height: 40px;
            line-height: 40px;
            background-color: #fff;
            font-size: 14px;
            width: 80%;
            left: 10%;
            background:rgba(255,33,96,0.7);
            text-decoration: none;
            color: #fff;border-radius: 5px;
            text-align: center;
            display: none;}
        .show .btn{
            display: block;}
        .btn:hover{background:rgba(255,33,96,1);}
         a:link{color:#fff}
          a{color:#fff}
            a:visited{color:#fff}
        .body{
            display: none;}
        #loading{
            width:100%;
            height: 100%;
            position: absolute;
            background: url("712.gif");
            background-position:center ;
            background-repeat:no-repeat ;
        }
        .text{
            position: absolute;
            width: 100%;
            top: 35%;
            color: #fff;
            font-size: 16px;text-shadow:2px 2px 2px #666;
            z-index: 999;
            font-weight: bold;
            left: 0;
            line-height: 30px;
            text-align: center;}
        .animated {
            -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .animated.infinite {
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

        .animated.hinge {
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
        }

        @-webkit-keyframes fadeIn {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .fadeIn {
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
        }

        @-webkit-keyframes fadeOut {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes fadeOut {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
        }
    </style>
</head>
<body>
<div id="loading"></div>
<div class="body">
    <div class="wrapper f-pr">
        <div class="cell f-pr">
            <img src="hb.jpg"/>
            <a href="pic.php" class="btn animated fadeIn">点击制作你的专属电影海报</a>
        </div>   <p class="text animated fadeIn">梦想还是要有的，万一遇到尔冬升呢！<br/>尔冬升诚意之作《我是路人甲》<br/>7月3日全国上映!</p>
    </div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    var bg=new Image;//背景图片
    bg.src='hb.jpg';
    bg.onload=function() {
        $('#loading').hide();
        $('.body').show();
      };
    $('.text').click(function(){
    var obj=$(this);
        obj.addClass('fadeOut');
        setTimeout(function(){
        obj.remove();
            $('.cell').addClass('show');
        },200)
    })
</script>
</body>
</html>